<template>
  <view class="authorize-wrapper3">
    <image v-if="settings.id !== 'csxr'" :src="'/static/flash.jpg'" style="width: 100%;height: 100%;" />
    <u-line-progress class="loadingbk3" active-color="#ff9900" :style="{ marginTop: height-100 + 'px' }" :percent="progr" :striped="true" :show-percent="false" :striped-active="true"></u-line-progress>
    <div :style="{ marginTop: height-75 + 'px' }" class="loadd">Loading...</div>

  </view>
</template>
<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["settings"]),
  },
  data() {
    return {
      height: 100,
      progr: 0,
      timer: "",
    };
  },
  onReady() {
    const systemInfo = uni.getSystemInfoSync();
    this.height = systemInfo.windowHeight;
    console.log(this.height);
  },
  onLoad: function (option) {
    if (this.settings.id !== "zxr") {
      uni.redirectTo({
        url: "/pages/index/index",
      });
    } else {
      this.timer = setInterval(this.refrePro, 20);
    }
  },
  created() {},
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    refrePro() {
      this.progr += 1;
      if (this.progr >= 100) {
        this.progr = 100;
        clearInterval(this.timer);
        setTimeout(function () {
          uni.redirectTo({
            url: "/pages/index/index",
          });
        }, 1000);
      }
    },
  },
};
</script>

<style lang="scss">
.authorize-wrapper3 {
  @include full-flex;
  background-color: $white;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}
.loadd {
  position: absolute;
  color: #ffffff;
  font-size: 20px;
}
.loadingbk3 {
  position: absolute;
  width: 240px;
}
</style>